<template>
  <div class="container">
    <router-link v-show="showHeader" tag="div" to="/" class="header-back">
      <div class="iconfont back-icon">&#xe624;</div>
    </router-link>
    <div v-show="!showHeader" :style="opacityStyle" class="header">
      <router-link to="/">
        <span class="iconfont back-icon">&#xe624;</span>
      </router-link>
      <div class="title">景点详情</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailHeader',
  data () {
    return {
      showHeader: true,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  methods: {
    handleScroll () {
      const top = document.documentElement.scrollTop
      if (top > 60) {
        let opacity = top / 140
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = { opacity }
        this.showHeader = false
      } else {
        this.showHeader = true
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>\
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .container
    position fixed
    top 0
    left 0
    right 0
    width 100%
    height .86rem
    z-index 9
    .header-back
      width .72rem
      height .72rem
      font-size .4rem
      color #fff
      position absolute
      top .1rem
      left .1rem
      background rgba(0, 0, 0, .5)
      border-radius 100%
      display flex
      justify-content center
      align-items center
    .header
      width 100%
      height $headerHeight
      line-height $headerHeight
      color #fff
      background $bgColor
      position relative
      .back-icon
        color #fff
        position absolute
        top 0
        left 0
        height $headerHeight
        width: .64rem
        font-size: 0.4rem;
        text-align center
      .title
        margin 0 1rem
        text-align center
        font-size .32rem
        ellipsis()
</style>
